<template>
  <view class="membership_card">

    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="我的团体卡"></z-nav-bar>
      </template>
      <public-loading></public-loading>
      <!-- 会员卡 -->
      <view class="animated fadeIn faster">
        <view class="card-pot orange" v-for="item in dataList" :key="item" @click="navigateTo('/pagesMy/teamManagement/index?id='+item.id)">
          <view class="top flex-center-between" style="width: 100%">
            <view class="flex flex1" style="width: 100%">
<!--              <image src="http://www.xvopen.com/xiaoV/img11/ad.png" mode=""></image>-->
              <view class="title theme">
                <view>{{item.companyName}}</view>
              </view>
              <view class="title-right flex-aj-center">
              {{item.groupCardType?'企业卡':'家庭卡'}}
              </view>
            </view>
            <view class="bottom-right flex-aj-center" @click.stop="handleEntryClick(item)">
              <text>团体卡管理</text>
              <back borderColor="#613423" is-right></back>
            </view>
          </view>
          <view>{{item.storeFullName}}</view>
          <view class="bottom flex" style="margin-top: 25rpx">
            <view class="bottom-left">
              折扣：{{item.cardDiscount}}折
              <view>
                状态：{{formateStatus(item.cardStatus)}}
              </view>
            </view>
            <view class="bottom-left" style="margin-left: 43rpx;">
              可用额度：{{item.availableAmount}}元
              <view>
                已使用额度：{{item.usedAmount}}元
              </view>
            </view>
          </view>
        </view>
<!--        <view class="bottom-btn-box">-->

<!--          <main-button-->
<!--            :isGradient="false"-->
<!--            :color="'#fff'"-->
<!--            :bgColor="'#000000'"-->
<!--            :margin="'24rpx 0 0'"-->
<!--            @click="navigateTo('/pagesMy/user/card_list')">开通团体卡</main-button>-->
<!--        </view>-->
      </view>

    </z-paging>

  </view>
</template>

<script setup>
import { navigateTo } from '@/utils/navigator'
import { ref } from 'vue'
import {groupGetUserGroupCard} from '@/api/pagesMy/user'
import {useCustomStores} from '@/utils/hook'
const {userStore} = useCustomStores()
const {userInfo} = userStore
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {

  console.log('分页请求参数：', pageNo, pageSize)
  groupGetUserGroupCard({
    userId:userInfo.userId
  }).then(res=>{
    paging.value.complete(res)
  })
}
const formateStatus = (status) => {
  switch (status) {
    case 'normal':
      return '正常'
    case 'overdue':
      return '逾期'
    case 'disabled':
      return '禁用'
    case 'refunded':
      return '退卡'
  }
}

</script>

<style lang="scss">
@import "../style/common.scss";
.card-pot {
  &.blue {
    background-color: #D8E3FF;
  }
  &.orange {
    background-color: #FCDEAA;
  }
}
.theme {
  //max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-pot-bg{
  background-image: url("");
}
</style>
